<template>
    <Back title="新增文章信息" Add-Doctor-sty="adddoctor">
        <template #head>
            <div class="changeName">编辑文章信息</div>
        </template>
        <template #table_body>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <!-- 医生姓名输入框 -->
                <el-form-item label="文章标题" prop="title">
                    <el-input style="width:240px;" size="small" v-model="ruleForm.title"></el-input>
                </el-form-item>
                <!-- 文件上传 -->
                <el-form-item label="上传缩略图" prop="thumbnail">
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="ruleForm.thumbnail" :src="ruleForm.thumbnail" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <!-- 作者 -->
                <el-form-item label="作者" prop="author">
                    <el-input style="width:240px;" size="small" v-model="ruleForm.author"></el-input>
                </el-form-item>

                <el-form-item label="文章内容" prop="content">
                    <div class="text">
                        <div style="border: 1px solid #ccc;">
                            <Toolbar style="background-color: #f2f2f2; height: 30px;" :editor="editor"
                                :defaultConfig="toolbarConfig" :mode="mode" />
                            <Editor style="height: 225px; overflow-y: hidden;" v-model="html"
                                :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
                            <div class="bottom"></div>
                        </div>
                    </div>
                </el-form-item>
                <!-- 开关 -->
                <el-form-item label="文章状态" prop="delivery">
                    <el-switch v-model="ruleForm.delivery"></el-switch>
                </el-form-item>
                <!-- 日期 -->
                <el-form-item label="上传时间" prop="data">
                    <el-input style="width:240px;" size="small" type="date" v-model="ruleForm.data"></el-input>
                </el-form-item>
                <!-- 按钮 -->
                <el-form-item style="padding-left: 140px;">
                    <el-button size="small" style="width: 100px;" type="primary" @click="submitForm('ruleForm')">保存
                    </el-button>
                    <el-button size="small" style="width: 100px;" @click="resetForm('ruleForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </template>
    </Back>
</template>
<script>
// 导入自定义组件
import Back from '@/components/Part/BackColor.vue'
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getHealthDetail } from '@/api/Hospital/healthApi'
export default {
    data() {
        return {
            // 富文本
            editor: null,
            html: '<p>hello</p>',
            toolbarConfig: {
                toolbarKeys: [
                    'undo',
                    'redo',
                    '|',
                    'headerSelect',
                    'bold',
                    'underline',
                    'italic',
                    'color',
                    '|',
                    'bulletedList',
                    'numberedList',
                    { key: 'group-justify', title: '对齐', iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>', menuKeys: ["justifyLeft", "justifyRight", "justifyCenter", "justifyJustify"] },
                    { key: 'group-indent', title: '缩进', iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>', menuKeys: ['indent', 'delIndent'] },
                    '|',
                    'insertLink',
                    { key: 'group-image', title: '图片', iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>', menuKeys: ['insertImage', 'uploadImage'] },
                    'emotion',
                ]
            },
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'default', // or 'simple'

            ruleForm: {
                title: '',
                thumbnail: '',
                author: '',
                content: '',
                delivery: '',
                data: '',
            },
            rules: {
                // 医生名字
                title: [
                    { required: true, message: '请输入医生名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                thumbnail: [
                    { required: true, message: '请选择科室', trigger: 'change' }
                ],
                author: [
                    { required: true, message: '请输入医生名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],

                // 科室
                delivery: [
                    { required: true, message: '请选择科室', trigger: 'change' }
                ],
                // 职称
                data: [
                    { required: true, message: '请选择职称', trigger: 'change' }
                ],
            }
        }
    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
        },
        // 图片上传事件
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },


        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    this.$message({
                        message: '添加成功！',
                        type: 'success'
                    });
                    setTimeout(() => {
                        this.$router.push('/Hospital/doctor')
                    }, 1000);
                } else {

                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$message({
                message: '取消新增',
                type: 'info'
            });
            this.$router.push('/Hospital/doctor')
        }
    },
    // 挂载
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        setTimeout(() => {
            this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
        }, 1500)
        // ---------------------------------------------------------
        const articleid = this.$route.query.articleid
        if (articleid) {
            getHealthDetail({ articleid: articleid }).then((res) => {
                this.ruleForm.title = res.data[0].title
                this.ruleForm.thumbnail = res.data[0].thumbnail
                this.ruleForm.author = res.data[0].author
                this.ruleForm.data = res.data[0].operationtime
            })
        }
    },
    // 销毁富文本组件
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    },
    components: {
        Back,
        Editor,
        Toolbar
    }
}
</script>
<style lang="scss">
[Add-Doctor-sty="adddoctor"] {
    .text {
        width: 100%;

        .w-e-bar {
            background: transparent;
            height: 30px;

            .w-e-bar-item {
                height: 32px;
                padding: 0;
            }
        }

        .bottom {
            height: 30px;
            background-color: #f2f2f2;
        }

    }

    .el-form-item__label {
        width: 140px;
        text-align: center;
    }

    .avatar-uploader {
        height: 80px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        background: #f2f2f2;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .el-form-item {
        display: flex;
        align-items: center;
    }

}
</style>
<style lang="scss" scoped>
.changeName {
    color: #006efe;
    font-size: 12px;
    height: 40px;
    padding-left: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    margin-bottom: 20px;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
}

.avatar {
    width: 80px;
    height: 80px;
    display: block;
}
</style>